<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>待办任务列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .list-header {
            padding: 15px;
            background: #f8f8f8;
            border-bottom: 2px solid #e6e6e6;
        }
        .search-box {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <!-- 头部标题 -->
    <div class="list-header">
        <span class="layui-breadcrumb">
            <a href="/">工作台</a>
            <a><cite>待办任务</cite></a>
        </span>
    </div>

    <!-- 搜索栏 -->
    <div class="search-box">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="processName" placeholder="请输入流程名称" class="layui-input">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i>搜索
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 数据表格 -->
    <table id="todoList" lay-filter="todoList"></table>

    <!-- 操作列模板 -->
    <script type="text/html" id="todoAction">
        <a class="layui-btn layui-btn-xs" lay-event="handle">立即处理</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">查看详情</a>
    </script>
</div>

<script src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;

        // 初始化表格
        table.render({
            elem: '#todoList',
            url: '/task/todo',
            method: 'POST',
            page: true,
            contentType: 'application/json', // 新增内容类型
            request: {
                pageName: 'page',
                limitName: 'pageSize'
            },
            parseData: function (res) {
                return {
                    "code": res.code === 200 ? 0 : 1,
                    "msg": res.msg,
                    "count": res.data ? res.data.total : 0,  // 处理 res.data 为 null 的情况
                    "data": res.data.records
                };
            },
            cols: [[
                {field: 'taskId', title: '任务ID', width: 220, sort: true},
                {field: 'nodeName', title: '当前环节', minWidth: 150},
                {field: 'processDefinitionName', title: '流程名称', minWidth: 180},
                {field: 'startTime', title: '创建时间', width: 180, sort: true},
                {field: 'assignee', title: '处理人', width: 120},
                {fixed: 'right', title: '操作', toolbar: '#todoAction', width: 180}
            ]]
        });

        // 搜索功能
        form.on('submit(search)', function (data) {
            table.reload('todoList', {
                where: data.field
            });
            return false;
        });

        // 操作监听
        table.on('tool(todoList)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'handle':
                    handleTask(data.taskId);
                    break;
                case 'detail':
                    showDetail(data.taskId);
                    break;
            }
        });

        function handleTask(taskId) {
            layer.open({
                type: 2,
                title: '处理任务 - ' + taskId,
                area: ['800px', '600px'],
                content: '/task/handle/' + taskId
            });
        }

        function showDetail(taskId) {
            layer.open({
                type: 2,
                title: '任务详情 - ' + taskId,
                area: ['1000px', '600px'],
                content: '/task/detail/' + taskId
            });
        }
    });
</script>
</body>
</html>